<!--
 * @Author: 邹涵 zouh@wizpower.com
 * @Date: 2024-05-20 13:34:07
 * @LastEditors: 邹涵 zouh@wizpower.com
 * @LastEditTime: 2024-05-22 16:15:47
 * @FilePath: \rad-freq-res-web\src\views\test\index.vue
 * @Description: 
-->

<template>
  <!-- <v-scale-screen width="1920" height="1080" style="width: 100%;height: 100%;"> -->
  <!--页面内容-->
  <div>
    <div class="contentWrap">
      <div class="title"></div>
      <div class="body">
        <div class="charts">
          <div id="main" class="echartsStyle" ref="main"></div>
        </div>

        <div class="contain">
          <!-- 经验总览 -->
          <div class="experience">
            <div>
              <div></div>
              <div></div>
            </div>
            <div>
              <div></div>
              <div id="second" ref="second"></div>
            </div>
            <div>
              <div></div>
              <div id="third" ref="third"></div>
            </div>
            <div>
              <div></div>
              <div></div>
            </div>
          </div>
          <!-- 运营分析 -->
          <div class="contain"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- </v-scale-screen> -->
</template>
<script>
// import routesList from "@/router/index";
import VScaleScreen from "v-scale-screen";
import DevicePixelRatio from "@/utils/evicePixelRatio.js";
import { getPie3D, resizeFun, getCirlPoint, draw } from "@/utils/echarts.js";
import JSON from "./jiangsu.json";
import "echarts-gl"; //3D地图插件

export default {
  components: {
    VScaleScreen,
  },
  name: "homePage",
  data() {
    return {
      domImg: require("@/assets/images/bg.png"),
      colorList: [
        "rgba(69, 244, 245,  0.9)",
        "rgba(7, 166, 255,  0.9)",
        "rgba(255, 208, 118,  0.9)",
        "rgba(109, 148, 198, 0.9)",
        "rgba(255, 255, 255,  0.9)",
      ],

      // currentRouter: this.$route.path,
      // routesList: this.$router.options.routes,
      // isCollapse: true,
      // logo: require('@/assets/images/logo1.png'),
      // modeDisplay: true, //菜单和头部展示隐藏
    };
  },
  mounted() {
    new DevicePixelRatio().init();
    this.initEchart();
    this.initSecondEchart();
    this.initThirdEcharts();
    resizeFun();

    // this.getUrlParams()
  },
  computed: {},
  // watch: {
  //   // 监听路由对象 $route 的变化
  //   $route(to, from) {
  //     // 更新导航菜单的显示状态
  //     this.toNav()
  //   },
  // },
  watch: {
    // 通过监听路由来控制tab项的高亮，实现点击菜单项时对应的tab项也高亮
    $route: {
      handler(nowPath, oldPath) {
        console.log("indexAside监听到的路由:", nowPath.path, oldPath.path);
        //将当前路由赋值给 menuActive，这里用来控制激活菜单项
        this.currentRouter = nowPath.path;
      },
      // 深度观察监听
      deep: true,

      // 监听路由变化 处理两个组件之间的相互跳转，右侧页面产生变化，但左侧菜单选中状态未刷新
      // $route(to, from) {
      //   this.toNav(to.path)
      // },
      //处理activeName生效，但是openNames不生效的情况
      //运用Menu的updateopened方法：手动更新展开的子目录，注意要在 $nextTick 里调用。对openNames添加watch：
      // parentActiveMenu() {
      //   this.$nextTick(() => {
      //     this.$refs.side_menu.updateOpened()
      //     this.$refs.side_menu.updateActiveName()
      //   })
      // },
      // //监听菜单数据的变化'$store.state.users.routers' 固定写法
      // '$store.state.users.routers': function () {
      //   this.initMenuData()
    },
  },
  methods: {
    initSecondEchart() {
      let myChart = this.$echarts.init(document.getElementById("second"));
      const data = [
        {
          name: "快速充电桩",
          value: 134,
        },
        {
          name: "慢速速充电桩",
          value: 56,
        },
      ];
      const serData = data.map((dItem, index) => {
        return {
          ...dItem,
          value: Number(dItem.value),
          itemStyle: {
            color: this.colorList[index],
          },
        };
      });
      let option = getPie3D(serData, 0.7);
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
        console.log("resize了没");
      });
    },

    initEchart() {
      // 散点图配置
      let myChart = this.$echarts.init(document.getElementById("main"));
      this.$echarts.registerMap("江苏省", JSON);

      let option = {
        responsive: true,

        //右下方文字属性
        legend: {
          show: true,
          left: "5%",
          bottom: "5%",
          orient: "vertical",
          itemHeight: 30, //修改icon图形大小
          itemWidth: 30, //修改icon图形大小
          itemGap: 0,
          textStyle: {
            color: "red",
            fontSize: 12,
          },
        },
        // tooltip: {
        //   trigger: "item", //提示框的触发方式
        //   // 提示框的格式化函数，用于自定义提示框的内容
        //   formatter: function (data) {
        //     if (data.data && data.data.name) {
        //       return (
        //         "分布数量" +
        //         "<br/>" +
        //         data.data.name +
        //         ":" +
        //         data.data.value +
        //         "辆"
        //       );
        //     } else {
        //       return "";
        //     }
        //   },
        // },

        // //工具箱
        // toolbox: {
        //   show: true, //是否显示工具箱
        //   orient: "vertical", //工具箱的布局方向，可以设置为"horizontal"表示水平布局，或"vertical"表示垂直布局
        //   left: "right", //工具箱的水平位置，可以设置为具体的像素值或百分比，或使用预定义的值如"left"、"center"、"right"等
        //   top: "center", //工具箱的垂直位置，可以设置为具体的像素值或百分比，或使用预定义的值如"top"、"middle"、"bottom"等
        //   //工具箱中的功能按钮，可以通过设置不同的属性来定义不同的功能按钮
        //   feature: {
        //     //下载
        //     dataView: { readOnly: false },
        //     restore: {}, //重置按钮
        //     saveAsImage: {}, //保存为图片按钮
        //   },
        // },
        geo: {
          name: "江苏省",
          // type: 'map',
          map: "江苏省",
          selectedMode: false,
          // zoom: 5,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: "16",
              },
            },
            emphasis: {
              show: false,
              textStyle: { color: "#fff", fontSize: "16" },
            },
          },

          // tooltip: {
          //     show: false,
          //     enterable: true, //鼠标可进入浮层内
          //     // triggerOn: "click", // 点击触发
          //     backgroundColor: 'transparent',
          //     borderColor: 'transparent', // 修改字体颜色
          //     extraCssText: 'box-shadow: none',
          //     padding: 10,
          //     formatter: function (params) {
          //         //  租金总数 租户数 出租率 收缴率
          //         // 20,000 20,000 68% 78%
          //         let res = `<div class="mapInfos">
          //         <div class="mapInfos-item">
          //           <div class="round round_1"></div>
          //           <span class="label">资产数</span>
          //           <span class="num">12665</span>
          //         </div>
          //         <div class="mapInfos-item">
          //           <div class="round round_2"></div>
          //           <span class="label">租金总数</span>
          //           <span class="num">20,000</span>
          //         </div>
          //         <div class="mapInfos-item">
          //           <div class="round round_3"></div>
          //           <span class="label">租户数</span>
          //           <span class="num">20,000</span>
          //         </div>
          //         <div class="mapInfos-item">
          //           <div class="round round_4"></div>
          //           <span class="label">出租率</span>
          //           <span class="num">68%</span>
          //         </div>
          //         <div class="mapInfos-item">
          //           <div class="round round_5"></div>
          //           <span class="label">收缴率</span>
          //           <span class="num">78%</span>
          //         </div>
          //     </div>`
          //         return res
          //     },
          // },
          roam: false,
          itemStyle: {
            borderWidth: 5,
            borderColor: "#D9FBFE",
            shadowColor: "#6EDEFE",
            shadowBlur: 4,
            shadowOffsetX: -4,
            shadowOffsetY: 10,
            areaColor: "rgba(254,240,59,0)",
          },

          // itemStyle: {
          //     normal: {
          //         areaColor: 'rgba(254,240,59,0)',
          //         shadowColor: '#2B8FAF',
          //         shadowBlur: 4,
          //         shadowOffsetX: -4,
          //         shadowOffsetY: 10,
          //         borderColor: '#00EBFF',
          //     },
          //     emphasis: {
          //         areaColor: 'rgba(35, 242, 255, 0.9)',
          //         borderColor: 'rgba(254,240,59,0)',
          //     },
          // },
          data: [],
        },

        series: [
          {
            map: "江苏省", //地图的名称，可以是预定义的地图名称，也可以是自定义的地图名称
            // zoom: 5, //当前视角的缩放比例
            roam: false, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 4,
            },
            name: "", //系列名称
            type: "map", //系列类型，用于指定图表的类型
            mapType: "江苏省", // 自定义扩展图表类型
            label: {
              //标签设置
              show: false,
              color: "black",
            },
            data: [],
            itemStyle: {
              normal: {
                areaColor: "rgba(254,240,59,0)",
                shadowColor: "#2B8FAF",
                shadowBlur: 4,
                shadowOffsetX: -4,
                shadowOffsetY: 10,
                borderColor: "#00EBFF",
              },
              emphasis: {
                areaColor: "rgba(35, 242, 255, 0.9)",
                borderColor: "rgba(254,240,59,0)",
              },
            },
            // 名称映射，用于自定义地图区域的名称
            nameMap: {},
          },

          {
            zlevel: 12,
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "image://" + require("@/assets/images/logo.png"),
            symbolSize: 50,
            label: {
              normal: {
                show: true,
                formatter: function (value) {
                  return value.value[2];
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            itemStyle: {
              normal: {
                color: "#CE376B", //标志颜色
              },
            },
            data: [
              {
                name: "南京市",
                value: [120.9, 32.02, 0],
                code: "340100",
                itemStyle: { color: "red" },
              },
              {
                name: "无锡市",
                value: [119.811, 31.19, 0],
                code: "340200",
              },
            ],
          },

          {
            name: "资产数",
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 10,
            // tooltip: {
            //     show: false,
            // },
            // zlevel: 2,
            // rippleEffect: {
            //     period: 4, //动画时间，值越小速度越快
            //     brushType: 'fill', //波纹绘制方式 stroke, fill
            //     scale: 12, //波纹圆环最大限制，值越大波纹越大
            //     number: 2,
            // },
            // label: {
            //     normal: {
            //         show: false,
            //         position: [-12, 12],
            //         formatter: '{b}',
            //         fontSize: 10,
            //     },
            // },
            // // 发散点的大小
            // symbolSize: function (val) {
            //     return 4
            //     // return val[2] / 10;
            // },
            // itemStyle: {
            //     // color: colors[i],
            // },
            // emphasis: {
            //     areaColor: '#2B91B7',
            // },
            data: [
              {
                name: "南京市",
                value: [118.9, 32.02, 0],
                code: "340100",
                itemStyle: { color: "red" },
              },
              {
                name: "无锡市",
                value: [119.811, 31.19, 0],
                code: "340200",
              },
            ], // bar3D需要的数据
            // data: (() => {
            //     let colors = ['#FF0D0D', '#FF6600', '#FFCC00', '#28E3F2', '#D983A9']
            //     let data = {
            //         资产数: [
            //             [121.063142, 32.073975, 10],
            //             [121.091888, 32.048025, 10],
            //             [120.882044, 32.01815, 10],
            //             [121.164327, 31.8907, 10],
            //             [121.030947, 31.894624, 10],
            //             [120.70612, 32.312558, 10],
            //         ],
            //         租金总数: [[120.873995, 32.067611, 10], [121.003351, 32.094044, 10], []],
            //         租户数: [
            //             [120.982654, 32.019619, 10],
            //             [121.095912, 31.984344, 10],
            //             [120.517547, 32.601137, 10],
            //         ],
            //         出租率: [
            //             [120.939535, 32.086213, 10],
            //             [121.04762, 32.01717, 10],
            //             [121.04762, 32.01717, 10],
            //             [121.773163, 31.846541, 10],
            //         ],
            //         收缴率: [
            //             [120.872845, 32.042149, 10],
            //             [121.24769, 31.891681, 10],
            //             [121.299433, 32.355514, 10],
            //         ],
            //     }
            //     let finalData = []
            //     Object.keys(data).map((i, index) => {
            //         let child = data[i].map((row) => ({
            //             // name: i,
            //             value: row,
            //             itemStyle: {
            //                 color: colors[index],
            //             },
            //         }))

            //         finalData = [...finalData, ...child]
            //     })
            //     return finalData
            // })(),
          },

          //涟漪特效 目前只支持涟漪
          // {
          //     name: '资产数',
          //     type: 'effectScatter',
          //     coordinateSystem: 'geo',
          //     symbol: 'image://'+require('@/assets/images/logo.png'),
          //     hoverAnimation: true,
          //     effectType: 'ripple',
          //     showEffectOn: 'render',
          //     legendHoverLink : true,
          //     symbolSize: 100,
          //     tooltip: {
          //         show: false,
          //     },
          //     zlevel: 2,
          //     // 散点样式
          //     rippleEffect: {
          //         period: 4, //动画时间，值越小速度越快
          //         brushType: 'fill', //波纹绘制方式 stroke, fill
          //         scale: 15, //波纹圆环最大限制，值越大波纹越大
          //         number: 2,
          //     },
          //     // itemStyle: {
          //     //   normal: {
          //     //       color: 'red',
          //     //       shadowBlur: 10,
          //     //       shadowColor: '#333'
          //     //   }
          //     // },
          //     //涟漪下面的文字
          //     label: {
          //         normal: {
          //             show: false,
          //             position: [-12, 12],
          //             formatter: '{b}',
          //             fontSize: 10,
          //         },
          //     },
          //     // 发散点的大小
          //     symbolSize: function (val) {
          //         return 4
          //         // return val[2] / 10;
          //     },
          //     itemStyle: {
          //         // color: colors[i],
          //     },
          //     emphasis: {
          //         areaColor: '#2B91B7',
          //     },
          //     data: [
          //           {
          //               "name": "常州市",
          //               "value": [
          //                   119.90,
          //                   32.02,
          //                   0
          //               ],
          //               "code": "340100",
          //               itemStyle: {color:"red"}
          //           },
          //           {
          //               "name": "无锡市",
          //               "value": [
          //                   120.51,
          //                   31.190,
          //                   0
          //               ],
          //               "code": "340200"
          //           },
          //         ] // bar3D需要的数据
          // },
        ],

        // series: [
        //   {
        //     map: "江苏省", //地图的名称，可以是预定义的地图名称，也可以是自定义的地图名称
        //     zoom: 1.1, //当前视角的缩放比例
        //     roam: true, //是否开启平游或缩放
        //     scaleLimit: {
        //       //滚轮缩放的极限控制
        //       min: 1,
        //       max: 4,
        //     },
        //     name: "", //系列名称
        //     type: "map", //系列类型，用于指定图表的类型
        //     mapType: "江苏省", // 自定义扩展图表类型
        //     label: {
        //       //标签设置
        //       show: false,
        //       color: "black",
        //     },
        //     layoutCenter: ["50%", "50%"], //图表布局的中心位置
        //     layoutSize: "100%", //图表布局的大小
        //     data: [
        //       { name: "南京市", value: 150 },
        //       { name: "内乡县", value: 480 },
        //       { name: "方城县", value: 500 },
        //       { name: "宛城区", value: 80 },
        //       { name: "社旗县", value: 320 },
        //       { name: "唐河县", value: 252 },
        //       { name: "邓州市", value: 108 },
        //       { name: "西峡县", value: 481 },
        //       { name: "新野县", value: 200 },
        //       { name: "南召县", value: 211 },
        //       { name: "淅川县", value: 98 },
        //       { name: "桐柏县", value: 170 },
        //       { name: "镇平县", value: 360 },
        //     ],
        //     // 名称映射，用于自定义地图区域的名称
        //     nameMap: {},
        //   },
        // ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
        console.log("resize了没");
      });
    },

    initThirdEcharts() {
      const myChart = this.$echarts.init(document.getElementById("third"));
      let angle = 0; //角度，用来做简单的动画效果的
      let value = 55.33;

    let   option = {
    backgroundColor: "#061740",
    polar: {
        radius: ['42%', '52%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    series: [
        //外环
        {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
                normal: {
                    position: "center",
                }
            },
            data: [
                {
                    value: 100,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: {
                              type: "radial",
                              x: 0.5,
                              y: 0.5,
                              r: 0.5,
                              colorStops: [
                                {
                                  offset: 0,
                                  color: "#051558",
                                },
                                {
                                  offset: 0.9,
                                  color: "#002e50",
                                },
                                {
                                  offset: 1,
                                  color: "#134568",
                                },
                              ],
                            },
                        }
                    }
                },
            ]
        },
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: ['20%', '45%'],
          center: ['50%', '50%'],
          roseType: 'area',
          labelLine: {
            length: 80,
            length2: 80,
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        },
        {
            name: '',
            type: 'pie',
            radius: ['60%', '61%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 2,
            zlevel: 0,
            label: {
                normal: {
                    position: "center",
                }
            },
            data: [
                {
                    value: 100,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#3EACF4",
                        }
                    }
                },
            ]
        },
        {
            name: '',
            type: 'pie',
            radius: ['65%', '65.5%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 2,
            zlevel: 0,
            label: {
                normal: {
                    position: "center",
                }
            },
            data: [
                {
                    value: 100,
                    name: "",
                    itemStyle: {
                        normal: {
                            color: "#417BC5",
                        }
                    }
                },
            ]
        },
    ]
};
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
        console.log("resize了没");
      });
    //   setInterval(function () {
    //     //用setInterval做动画感觉有问题
    //     angle = angle + 3;
    //     myChart.setOption(option, true)
    //   }, 100);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath, "1111");
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toNav(router) {
      console.log(this.$route.path);
      this.currentRouter = router;
      this.$router.push(router);
    },
  },
};
</script>
<style lang="scss" scoped>
$bg-url: "@/assets/images/bg.png";
$title-url: "@/assets/images/TOP.png";

.body {
  width: 100%;
  height: 90%;
}

.echartsStyle {
  width: 100%;
  height: 100%;
  // background-image:  url($bg-url);
  //   background-size:contain;
  //   background-repeat:no-repeat;
  //   background-position:center;
}

@mixin title {
  width: 100%;
  height: 10%;
  display: flex;
  background-image: url($title-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@mixin charts {
  width: 100%;
  height: 30%;
  display: flex;
  background-color: white;
  // background-image:  url($title-url);
  // background-size:contain;
  // background-repeat:no-repeat;
  // background-position:center;
}

// @media screen and (min-width : 1080px) and (max-width:1919px){
.contentWrap {
  background-color: red;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  background-image: url($bg-url);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  .title {
    @include title();
  }
  .charts {
    @include charts();
  }
}

.contain {
  width: 100%;
  height: 70%;
  background-color: red;
  .experience {
    width: 100%;
    height: 30%;
    background-color: green;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    > div:nth-child(n) {
      width: 20%;
      height: 70%;
      background-color: white;
      > div:nth-child(1) {
        width: 100%;
        height: 20%;
        background-color: red;
      }
      > div:nth-child(2) {
        width: 100%;
        height: 80%;
        background-color: pink;
      }
    }
  }
}
// }

// @media (orientation: portrait ){
//  //竖屏CSS
//  .contentWrap {
//         background: yellow;
//         width: 100%;
//         height: 100%;
//         display: flex;
//       }
// }
// @media ( orientation: landscape ){
//  //横屏CSS
//  .contentWrap {
//         background: blue;
//         width: 100%;
//         height: 100%;
//         display: flex;
//       }
// }

//  @media  screen and (min-width: 2160px)  {
//   .contentWrap {
//         background: yellow;
//         width: 100%;
//         height: 100%;
//         display: flex;
//       }
//     }

//   @media screen and (min-width : 1920px) and (max-width:2160px){
//       .contentWrap {
//         background: green;
//         width: 100%;
//         height: 100%;
//         display: flex;
//       }
//   }

// .contentWrap {
//   width: 100%;
//   // min-width: 2160px; //缩放超出的时候保证头部还有背景颜色
//   // min-height: 3840px; //缩放超出的时候保证头部还有背景颜色
//   //height: 93vh;
//   height: 100%; //缩放超出的时候保证头部还有背景颜色
//   display: flex;
//   // height: 100%;
//   justify-content: space-between;
//   background: red;
//   .left {
//     width: 50%;
//     background-color: rgba(255, 255, 255, 1);
//     height: 100%;
//     // background: #f3f4f7;
//     }
//   // }

//   // .right {
//   //   width: calc(100% - 240px);
//   //   // width: 100%;
//   //   height: 100%;
//   //   .content {
//   //     width: 100%;
//   //     height: 100%;
//   //     padding: 1%;
//   //     // height: calc(100% - 50px);
//   //     height: 100%;
//   //   }
//   // }
// }

// .everyNavAv:nth-child(1)::before,
// .everyNavAv:nth-child(2)::before,
// .everyNavAv:nth-child(3)::before,
// .everyNavAv:nth-child(4)::before,
// .everyNavAv:nth-child(5)::before {
//   content: '';
//   transform: translateY(12px);
//   display: inline-block;
//   width: 28px;
//   height: 28px;
// }

// .everyNavAv:nth-child(1)::before {
//   background: url(@/assets/layout/collect_active.png) no-repeat;
// }
// .everyNavAv:nth-child(2)::before {
//   background: url(@/assets/layout/photovoltaic_active.png) no-repeat;
// }
// .everyNavAv:nth-child(3)::before {
//   background: url(@/assets/layout/windpower_active.png) no-repeat;
// }
// .everyNavAv:nth-child(4)::before {
//   background: url(@/assets/layout/conventional_active.png) no-repeat;
// }
// .everyNavAv:nth-child(5)::before {
//   background: url(@/assets/layout/maintenance_active.png) no-repeat;
// }
// .everyNav:nth-child(1)::before,
// .everyNav:nth-child(2)::before,
// .everyNav:nth-child(3)::before,
// .everyNav:nth-child(4)::before,
// .everyNav:nth-child(5)::before {
//   content: '';
//   display: inline-block;
//   width: 28px;
//   height: 28px;
// }

// .everyNav:nth-child(1)::before {
//   background: url(@/assets/layout/collect.png) no-repeat;
// }
// .everyNav:nth-child(2)::before {
//   background: url(@/assets/layout/photovoltaic.png) no-repeat;
// }
// .everyNav:nth-child(3)::before {
//   background: url(@/assets/layout/windpower.png) no-repeat;
// }
// .everyNav:nth-child(4)::before {
//   background: url(@/assets/layout/conventional.png) no-repeat;
// }
// .everyNav:nth-child(5)::before {
//   background: url(@/assets/layout/maintenance.png) no-repeat;
// }
</style>
